/*
  学习目标：生命周期-更新阶段
  1. render: 更新中，只负责更新界面

  2. componentDidUpdate
    2.1 对标：vue中updated
    2.2 场景：做缓存

  触发更新阶段的两种方式：
    1. setState
    2. props改变
  注意:
    💥 不能在更新阶段的钩子函数中, 调用setState否则死循环
*/
import React, { Component } from 'react';

export default class App extends Component {
  state = { count: 1 };

  // 更新后 对标： updated
  componentDidUpdate() {
    console.log('componentDidUpdate被执行了  ----->  ', this.state.count);
    this.setState({ count: this.state.count + 1 });
  }

  // 更新中
  render() {
    console.log(' render被执行了  ----->  ', this.state.count);
    return (
      <div>
        {this.state.count}

        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          点我+1
        </button>
        <Child msg="123"></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  // 更新后 对标： updated
  componentDidUpdate() {
    // console.log('Child componentDidUpdate被执行了  ----->  ');
  }
  render() {
    const { msg } = this.props;
    // console.log('Child render被更新了  ----->  ');
    return <div>{msg}</div>;
  }
}
